AI 시대, 비개발자의 바이브 코딩 앱 개발기

1. 코딩 한 줄 몰라도 만든 5개의 앱

비개발자인 제가 약 6주간 바이브 코딩으로 5개의 앱 서비스를 만들고 배포까지 완료했습니다.

• 개발 기간: 약 6주
• 개발 비용: 무료(API, 호스팅 비용 포함)
• 사용 도구: Google AI Studio, Claude Code, VS Code, Github, Vercel

2. 들어가며 — “개발은 못 하지만, 만들어보고 싶었다”

2-1. 비개발자인 내가 왜 앱 개발에 도전했는가

저는 데이터와 인공지능 산업군에 속한 미디어나비의 유일한 비개발자입니다. 저희 회사는 인공지능 기업답게 슬랙과 정기 회의 시간을 통해 최신 기술 동향과 업계 트렌드를 꾸준히 공유합니다.기술적인 영역은 내 분야가 아니라고 생각했지만, 그 시간들 덕분에 AI와 데이터에 대한 이해가 자연스럽게 깊어졌습니다.

‘바이브 코딩으로 만든 서비스가 월 매출 2억 원을 달성했다’는 이야기가 처음엔 남의 일처럼 들렸습니다. 바이브 코딩 방법이 어느 정도 머릿 속에 그려지며 “그럼 나도 할 수 있지 않을까?”라는 호기심이 생겼습니다.

2-2. Google AI Studio, Claude, VS Code로 만난 새로운 가능성

“나도 직접 앱을 개발해볼까?”라는 확신이 든 결정적인 계기는 Google AI Studio의 등장이었습니다.

평소 ChatGPT와 Claude, Grok, Midjourney 같은 생성형 AI를 활용해 시장조사, 문서작성, 아이데이션, 아이의 학습 콘텐츠 제작까지 다양하게 사용하고 있었습니다. Google AI Studio에서는 단순한 프롬프트 입력만으로 내가 구상한 앱 화면과 실시간 동작하는 기능들을 직접 구현해볼 수 있었습니다.

또한 VS Code(Visual Studio Code)는 개발자들이 주로 사용하는 대표적인 코드 편집기이지만, 저는 이미 자사 홈페이지 콘텐츠 수정 및 편집 과정에서 다뤄본 경험이 있어 쉽게 접근할 수 있었습니다.

2-3. ‘바이브 코딩(Vibe Coding)’이란?

‘바이브 코딩’은 비개발자도 AI와의 대화만으로 서비스를 만들어가는 새로운 개발 방식입니다.

명확한 문법이나 전문 지식보다 ‘아이디어의 흐름’과 ‘대화의 감(Vibe)’을 중심으로 코드를 완성하는 접근법입니다. 2024년, 생성형 AI가 실시간 코드 생성과 수정 기능을 본격적으로 지원하기 시작하면서 자연스럽게 등장한 개념이기도 합니다.

즉, 코딩의 중심이 ‘입력(Input)’에서 ‘대화(Dialogue)’로 이동한 시대. 이제는 코딩을 배운 적 없는 누구라도 적절한 프롬프트를 통해 자신만의 앱을 만드는 시대가 열린 것입니다.

3. AI와 함께한 개발 환경 세팅

3-1. Google AI Studio에서 아이디어로 앱 만들기

Google AI Studio의 왼쪽 사이드 메뉴에 Build 메뉴가 있습니다.

이 안에는 프롬프트, 이미지, 동영상 생성 등 다양한 템플릿이 제공되며, ‘Your Apps’ 메뉴에서 프로젝트별로 직접 앱을 만들 수 있습니다.

기획한 아이템의 아이디어, 목적, 기능, 화면 디자인 등을 채팅창에 프롬프트로 입력하면, 의도한 결과물을 우측 화면에서 실시간으로 프리뷰하며 코드 수정이 가능합니다.

막연히 상상했던 UI/UX가 즉시 생성되고, Gemini 모델의 연동으로 너무나도 쉽게 다양한 기능 구현이 눈앞에 펼쳐지는 것. 마지막으로 그것들을 테스트하며 실시간으로 수정할 수 있다는 점은 기존 개발 방식에서는 경험할 수 없던 흥미로운 과정입니다.

3-2. Claude 코드와 VS Code의 연동 — 대화형 개발의 핵심

현재 생성형 AI 중에서는 Claude의 코드 생성 능력이 가장 정확하고 안정적이라는 평이 많습니다.

저 역시 Google AI Studio에서 기획한 내용을 토대로 VS Code에 Claude 코드를 연동해 개발 작업을 진행했습니다. 즉, Google AI Studio에서 아이디어를 구체화하고, VS Code에서 Claude와의 대화를 통해 코드를 실행·수정하는 방식으로 협업한 것입니다.

3-3. “AI에게 명령하는 게 아니라, 함께 대화하며 만드는 개발”

이번 개발과정에서 Claude 코드는 단순한 코드 생성기가 아니라 대화형 개발 파트너에 가까웠습니다. 기존처럼 명령어를 입력하는 방식이 아니라, “이렇게 구현하고 싶은데 가능할까?” “이 부분이 예상대로 동작하지 않는 이유가 뭘까?”와 같은 질문과 대화를 통해 해결해 나갔습니다.

물론 AI에게 막연하게 “이런 앱 서비스를 만들어줘”라고 말한다고 해서 뚝딱 완성되는 것은 아닙니다. 개발의 출발점은 여전히 기획과 구조화된 정보 정리입니다. 그래서 저는 코드 작성 전 단계에서 프롬프트 설계를 가장 중요하게 두었습니다.

3-4. 코딩 대신 ‘프롬프트 설계’가 중심이 된 경험

사실 이 과정은 기존 개발 방식과도 다르지 않습니다. 명확한 기획 의도와 요구사항을 정리한 문서가 있어야 개발이 효율적으로 진행되듯, AI 기반 개발에서도 기획 문서가 핵심 역할을 했습니다.

프로젝트마다 다음 5가지 문서를 .md 형식으로 정리해 프로젝트 폴더에 저장해두었습니다.

• Spec — 어떤 기능을 가진 서비스인지 정의
• Plan — 구현 단계 및 일정
• Research — 참고한 사례, 레퍼런스
• Task — 개발 단위 작업 목록
• Agent — AI에게 역할과 목표를 명확히 알려주는 전용 문서

이 문서들은 단순 참고자료가 아니라, Claude 코드가 정확한 방향으로 개발을 진행할 수 있도록 안내하는 네비게이션 역할을 했습니다.

예를 들어 “이 프로그램의 주요 사용자 행동은 ○○이고, 화면 전환은 △△ 순서로 이루어진다” 같은 정보를 미리 정의해두면, AI가 코드를 작성할 때 훨씬 일관된 구조를 유지할 수 있었습니다.

아래는 실제로 제가 활용했던 오픈소스용 Spec 문서 템플릿입니다. 바이브 코딩을 시작하는 분들께 추천합니다.

[GitHub Toolkit] https://github.com/github/spec-kit: 💫 Toolkit to help you get started with Spec-Driven Development

4. 바이브 코딩의 탄생 — 즉흥에서 구조로

4-1. 처음에는 그냥 “대화”였다

처음에는 스펙 문서 없이 ChatGPT와 Claude에게 질문해가며 생성된 코드를 받아 파일을 하나씩 만들었습니다. GitHub에 수십 번 커밋하고, 브라우저에서 직접 수정하고 되돌리는 일을 반복했죠.
하지만 AI는 답변의 맥락이 일관되지 않아, 다음 날이 되면 “어제와 다른 AI 개발자”와 협업하는 느낌이 들었습니다. 말 그대로 즉흥과 시행착오의 연속이었습니다.

4-2. 어느 순간부터 “구조”가 보이기 시작했다

하지만 그 과정을 통해 한 가지를 분명히 깨달았습니다. 맹목적인 대화만으로는 앱을 만들 수 없다는 것.

기획 의도, 사용자 흐름, 화면 구성, 기능 요구사항 등을 스펙 문서 형태로 명확하게 정리하기 시작하면서부터 앱의 구조가 눈에 보이고, AI와의 소통도 훨씬 안정적으로 이루어졌습니다. 직접 코드를 짜는 건 AI 개발자이지만, 그 순간에는 제가 “개발을 주도하고 있다” 는 느낌을 받았습니다.

또한, 작업일지와 인수인계서 를 매일 기록해 다음 날 AI에게 전달하니 프로젝트의 맥락을 이해한 상태로 순조롭게 작업이 이어졌습니다. 그 순간에는 우리가 “함께 작업하고 있다” 는 느낌이 들기도 했죠.

4-3. 결국 핵심은 ‘좋은 질문(프롬프트)’

생성형 AI를 잘 쓰는 핵심은 결국 좋은 질문을 설계하는 능력 입니다. 기존 개발자도 ‘인간 → 컴퓨터’ 언어를 번역하는 역할을 하듯, 바이브 코딩에서는 ‘나의 의도 → AI가 이해할 수 있는 언어’ 로 전달하는 과정이 중요합니다.

즉, 기획은 사람이 하고, 코드는 AI가 대신 작성하는 시대.
좋은 프롬프트는 그 둘을 연결하는 가장 중요한 스킬이었습니다.

5. 실전 워크플로우

앱을 만들기 위한 전체 프로세스는 크게 (1) 스펙문서 생성 → (2) 대화형 개발 → (3) 버전 관리 → (4) 자동 배포 네 단계로 진행했습니다. 이 흐름이 자리잡히고 나서부터 개발 속도가 눈에 띄게 빨라졌고,“아, 이제 진짜 뭔가를 만들고 있다” 는 감각이 생겼습니다.

5-1. Google AI Studio에서 화면과 기능 초안 만들기

Google AI Studio는 아이디어를 바로 UI와 코드 형태로 생성해주는 도구입니다. 초기 설계 단계에서 특히 유용했습니다.

1. Google AI Studio → Build 메뉴 진입
2. Your Apps에서 새 프로젝트 생성
3. 원하는 기능/동작을 자연어로 설명
4. 자동 생성된 UI, 기능 작동여부 및 코드 확인 → 필요한 부분 수정·반복

• 주의: 수정사항 생길 때마다 우측 상단에 app saved 클릭

이 단계는 “디자인 → 개발”이 아니라 “생각 → 화면” 으로 바로 연결되는 느낌이라 비개발자인 입장에서 특히 진입장벽이 낮아 가장 흥미로운 지점이었습니다.

제가 여기서 얻은 코드는 완성본이 아니라 스케치 초안용입니다. 실제 개발의 중심은 VS Code & Claude Code로 진행했습니다.

5-2. VS Code에서 Claude Code 연동, 대화형 코딩 시작하기

실제 개발은 VS Code + Claude Code 확장 프로그램을 사용했습니다.Claude Code는 단순 코드 생성기가 아니라 “맥락을 공유하고 함께 수정해나가는 협업 파트너” 에 가까웠습니다.

1. VS Code 실행
2. Extensions → Claude Dev Tools 설치
3. Claude 계정 API 연결
4. 프로젝트 폴더 내 docs/ 폴더 생성: 여기서 Spec, Plan, Task 등 .md 문서로 요구사항을 정리
5. 이 문서를 기반으로 이 부분을 구현/수정해달라 요청하며 개발 진행

더 상세한 방법은 클로드에게 질문하거나 공식 문서 https://docs.claude.com/en/docs/claude-code를 참고하시면 도움이 됩니다.

5-3. GitHub로 버전 관리하기

GitHub는 변경 이력 관리 + 되돌리기 + 협업 가능 상태 유지를 위해 필수였습니다.

git init
git remote add origin <github-repository-url>
git add .
git commit -m "first commit"
git push -u origin main

이후 과정은 수정 → commit → push의 반복입니다. 단순하지만 이 과정이 있어야 실패했을 때 언제든 되돌릴 수 있고, 앱의 점진적 발전이 한눈에 보입니다.

5-4. Vercel로 자동 배포하기 — “push 하면 앱이 바로 살아난다”

원하는 기능과 UI/UX가 완성되면 Vercel과 GitHub를 연동해 자동 배포를 설정했습니다. 사실 초반 결과물들은 개발과정 보다 배포과정이 훨씬 더 복잡하고 힘들었습니다. 그런데 이를 해결해준 사이트가 있었으니 바이브 코딩에서 가장 유용하게 사용되는, 고마운 자동 배포 사이트 Vercel https://vercel.com 입니다. 덕분에 배포시간이 획기적으로 줄었습니다.

1. Vercel 계정 생성 → GitHub 연결
2. 배포할 Repository 선택
3. 자동으로 빌드 & 배포 완료

이후에는 별도 과정이 필요 없습니다. 코드 수정 → push 하면 → 실시간으로 사용자 버전이 업데이트됩니다.
특히 프론트엔드 중심 앱은 Vercel에서 무료로 안정적으로 호스팅할 수있습니다. 이 방식으로 총 5개의 앱 서비스를 모두 호스팅 비용 없이 배포했습니다.

6. AI 시대의 기획자 — Prompt Literacy

지난 몇 주 동안 5개의 프로토타입 앱을 만들었습니다. 가장 큰 성과는 결과물이 아니라, “개발의 진입장벽이 생각보다 낮다는 확신” 이었습니다.

생성형 AI 등장 이후, 기획자의 역량은 달라졌습니다. 기획자는 더 이상 문서를 넘기는 사람이 아니라, 혁신적으로 짧아진 기획 → 시제품 제작 → 테스트 → 개선의 사이클을 통해 아이디어를 바로 제품으로 연결시키는 사람이 될 수 있습니다.

그 핵심 역량은 Prompt Literacy, 즉 “내 의도를 기계가 이해할 수 있는 언어로 표현하는 기술” 입니다. 이 패러다임의 변화는 창작의 접근성을 완전히 바꾸고 있다고 생각합니다.

“누구나 기술 없이도 창작할 수 있는 사회” - 우리는 바로 그 전환점에 서 있습니다. 미디어나비는 “누구나 기술 없이도 인공지능을 누릴 수 있는 세상”을 향해 나아갑니다. 그 여정에 미디어나비가 도움되는 역할이 있다면 기꺼이 환영합니다.

참고 링크

1. https://claude.ai/new
2. https://docs.claude.com/en/docs/claude-code
3. https://code.visualstudio.com/
4. https://code.visualstudio.com/docs
5. https://aistudio.google.com/prompts/new_chat
6. https://ai.google.dev/gemini-api/docs/ai-studio-quickstart?hl=ko
7. https://github.com/github/spec-kit
8. https://github.com/github/spec-kit?tab=readme-ov-file#-get-started
9. https://vercel.com/
10. https://vercel.com/guides